<template>

<div class="sever_list">
    <div class="server_title">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 服务项目</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainBtn">
            <el-button type="success" @click="addServiceItemDialog = true"><i class="el-icon-plus"></i>添加</el-button>
            <el-button type="primary" @click="editFn($event)">编辑</el-button>
            <el-button type="info" @click="ashcanFn()"><i class="el-icon-delete"></i>垃圾箱</el-button>
        </div>
    </div>
    <el-tabs type="border-card" @tab-click="serviceItemFn($event)">
        <el-tab-pane v-for="item in serviceItem" :key="item.id"  class="itemList">
            <span slot="label" :dataId="item.id">{{item.serviceItemGroupName}}</span>
            <ul @click="selectFn($event)">
                <li  v-for="list in serviceItem_list" :key="list.id" :item="list.id" class="server_cell">
                    <img :src="baseImgUrl + list.serviceItemImage" class="server_img"/>
                    <p class="server_font">{{list.name}}</p>
                    <i class="el-icon-close server_delete_btn" :item="list.id"></i>
                </li>
                <li v-if="!deleteServerItem_if" @click="deleteServerItemFn" :index="9">删除分组</li>
                <li @click="addSIServiceFn()" :index="9" class="add_server_btn">
                    <i class="el-icon-plus"></i>
                    添加
                </li>
            </ul>
        </el-tab-pane>
    </el-tabs>


<!--Dialog-->
    <el-dialog
        title="添加分组"
        :visible.sync="addServiceItemDialog"
        width="500px">
        <el-form ref="itemForm" :model="itemForm" label-width="120px">
            <el-form-item label="分组名称：">
                <el-input v-model="itemForm.name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="addServiceItemDialog = false" >取 消</el-button>
                <el-button type="primary" @click="addServiceItem()">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
        :title="title"
        :visible.sync="addServiceInfoItemDialog"
        width="500px">
        <div>
            <el-form ref="infoItemForm" :model="infoItemForm" label-width="120px">
            <el-form-item label="服务项目名称：">
                <el-input v-model="infoItemForm.name"></el-input>
            </el-form-item>
            <el-form-item label="市场价：">
                <el-input v-model="infoItemForm.marketPrice" class="serve_select_width"></el-input> 元
            </el-form-item>
            <el-form-item label="项目时长：">
                <el-select v-model="infoItemForm.duration" placeholder="请选择时长" class="serve_select_width">
                    <el-option label="15" value="15"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="45" value="45"></el-option>
                    <el-option label="60" value="60"></el-option>
                    <el-option label="75" value="75"></el-option>
                    <el-option label="90" value="90"></el-option>
                </el-select>
                 分钟
            </el-form-item>

            <el-form-item label="项目配图：">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action=""
                    :on-change="onUploadChange"
                    :file-list="fileList"
                    list-type="picture"
                    :auto-upload="false"
                    :limit=1>
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="项目描述：">
                <el-input type="textarea" v-model="infoItemForm.serviceItemImageDescribe"></el-input>
            </el-form-item>
        </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button @click="addServiceInfoItemDialog = false" >取 消</el-button>
                <el-button type="primary" @click="determine()">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
        title="垃圾箱"
        :visible.sync="ashcanIs"
        width="80%">
        <el-form ref="itemForm" :model="itemForm" label-width="120px">
            <el-tabs type="border-card" @tab-click="serviceItemFn($event,1)">
                <el-tab-pane v-for="item in serviceItem" :key="item.id"  class="itemList">
                    <span slot="label" :dataId="item.id">{{item.serviceItemGroupName}}</span>
                    <ul @click="selectFn($event,1)">
                        <li  v-for="list in reuseItem_list" :key="list.id" :item="list.id">{{list.name}} <i class="el-icon-check" :item="list.id"></i></li>
                    </ul>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="closeAshcanFn()" >关 闭</el-button>
        </span>
    </el-dialog>


</div>
</template>



<script>
    import {
        getServer,
        addSIService,
        attachments,
        getItemService,
        addLIService,
        getLIService,
        deleteServerItem_As,
        deleteServerItemInfo_As,
        editLIService,
        reuseItem
    } from '../api/api';
    import {base64,tool_confirm} from '../tool/tool'
    export default {
        data() {
            return {
                title:'',
                editIndex:'',
                ifEdit:false,
                ashcanIs:false,
                baseImgUrl:this.$ajaxBase + '/attachments/download?id=',
                addServiceItemDialog:false,
                addServiceInfoItemDialog:false,
                deleteServerItem_if:false,
                serviceItemGroupId:'',
                collapse: false,
                name: 'linxin',
                serviceItem:null,
                serviceItem_list:null,
                reuseItem_list:null,
                fileList:[],
                itemForm:{
                    name:''
                },
                infoItemForm: {
                    name: '',
                    duration: '',
                    serviceItemImage: '',
                    serviceItemImageDescribe: '',
                    serviceItemGroup: {
                        id:''
                    }
                },
                infoItemForm2: {
                    name: '',
                    duration: '',
                    serviceItemImage: '',
                    serviceItemImageDescribe: '',
                    serviceItemGroup: {
                        id:''
                    }
                }
            }
        },
        created(){
            this.getServerList({status:'NORMAL'})
        },
        methods:{
            getServerList(obj){//获取项目列表
                getServer().then(res => {
                    this.serviceItem = res.data.content.list;
                    console.log(obj.init,this.serviceItem[0].id)
                    obj.init ? this.infoItemForm.serviceItemGroup.id = obj.init : this.infoItemForm.serviceItemGroup.id = this.serviceItem[0].id;
                    this.serviceItemGroupId = this.infoItemForm.serviceItemGroup.id;
                    this.getListFn(this.serviceItemGroupId,obj.status);

                });
            },
            getListFn(id,status){//获取项目内容列表
                console.log(id,status)
                getLIService({
                    groupId:id,
                    status: status
                }).then(res => {
                    console.log(res)
                    status === 'NORMAL' ? this.serviceItem_list = res.data.content.list : this.reuseItem_list = res.data.content.list;
                    this.deleteServerItem_if = res.data.content.list.length;
                })
            },
            serviceItemFn(e,status){//获取当前项目下内容列表
                console.log(e.$vnode.key,status,1111)
                this.infoItemForm.serviceItemGroup.id = e.$vnode.key;
                this.serviceItemGroupId = e.$vnode.key;
                status ? this.getListFn(e.$vnode.key,'DELETED')  : this.getListFn(e.$vnode.key,'NORMAL')
            },
            addServiceItem(){//添加项目分组
                let obj = {
                    serviceItemGroupName:this.itemForm.name
                };
                let fn = res => {
                    console.log(res.data.content.entity.id);
                    this.message('修改成功');
                    this.addServiceItemDialog = false;
                    this.getServerList({init:res.data.content.entity.id});
                };
                addSIService(obj).then(fn)
            },
            addSIServiceFn(){//添加项目内容条目
                this.fileList = [];
                this.title = '添加服务项目';
                this.addServiceInfoItemDialog = true;
                this.ifEdit = true;
                this.infoItemForm =  {
                    name: '',
                    duration: '',
                    serviceItemImage: '',
                    serviceItemImageDescribe: '',
                    serviceItemGroup: {
                        id:''
                    }
                };
                this.infoItemForm.serviceItemGroup.id = this.serviceItemGroupId;
            },
            determine(ifEdit){//确定项目内容
                console.log(this.infoItemForm,'这里是添加服务内容')
                let fn = res => {
                    console.log(res);
                    this.message('添加成功');
                    this.addServiceInfoItemDialog = false;
                    this.getListFn(this.infoItemForm.serviceItemGroup.id,'NORMAL')
                };
                if(ifEdit){
                    editLIService(this.infoItemForm).then(fn)
                }else{
                    console.log(this.infoItemForm)
                    addLIService(this.infoItemForm).then(fn)
                }
                // ifEdit ? editLIService(this.infoItemForm).then(fn) :addLIService(this.infoItemForm).then(fn)
            },
            editFn(e){//编辑项目内容
                let that = this;
                this.ifEdit = true;
                this.title = '服务项目详情';
                if(this.editIndex){
                    getItemService(this.editIndex).then(res => {
                        console.log(res.data.content.entity);
                        this.infoItemForm = res.data.content.entity;
                        this.addServiceInfoItemDialog = true;
                        this.fileList = [];
                        this.fileList[0] = {};
                        this.fileList[0].url = this.$ajaxBase + '/attachments/download?id=' + this.infoItemForm.serviceItemImage;
                        console.log(this.infoItemForm.serviceItemImage);
                        console.log(this.fileList[0].url);
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '你还没有选择！'
                    });
                }

            },
            deleteServerItemFn(){//删除项目分组
                deleteServerItem_As(this.infoItemForm.serviceItemGroup.id).then(res => {
                    this.getServerList();
                    console.log(res);
                });
            },
            message(msg){//提示信息
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },

            onUploadChange(file) {//上传图片事件
                let that = this;
                let base64Url = base64(file.url);

                base64Url.then(function(url){
                    let str = url.split(',');
                    console.log(str[1]);
                    attachments(str[1]).then(res =>{
                        that.infoItemForm.serviceItemImage = res.data.content.imgId;
                        console.log(res.data.content.imgId,that.infoItemForm.serviceItemImage);
                    })
                })
            },
            selectFn(e,reuse){//项目内容点击事件
               let target = e.target;
               let itemId = null;
               let forEachFn = () =>{
                   Array.prototype.slice.call(arr).forEach((value, index)=>{
                       arr[index].classList.remove('active')
                   });
               };
               while (target.nodeName === 'IMG' || target.nodeName === 'P'){
                   target = target.parentNode;
               }
                let arr = target.parentNode.children;
               if(target.nodeName === 'LI'&& target.getAttribute('index') !== '9'){
                   forEachFn();
                   target.classList.add('active');
                   this.editIndex = target.getAttribute('item')
               }else{
                   if(target.nodeName === 'I'){
                       itemId = target.getAttribute('item');
                       if(reuse){
                           tool_confirm(this,'是否要复用？').then(res => {
                               reuseItem(itemId).then(res => {
                                   this.getListFn(this.infoItemForm.serviceItemGroup.id, 'DELETED');
                                   console.log(res)
                               });
                               this.message('已复用');
                           }).catch(() => {
                               console.log('取消')
                           });
                       }else{
                           tool_confirm(this,'是否要删除？').then(res => {
                               deleteServerItemInfo_As(itemId).then(res => {
                                   this.getListFn(this.infoItemForm.serviceItemGroup.id, 'NORMAL');
                                   console.log(res)
                               });
                               this.message('删除成功');
                           }).catch(() => {
                               console.log('取消')
                           });
                       }
                   }
               }
            },
            ashcanFn(){//打开垃圾箱
                this.ashcanIs = true;
                this.getServerList({status:'DELETED'})
            },
            closeAshcanFn(){//关闭垃圾箱
                this.ashcanIs = false;
                this.getServerList({status:'NORMAL'})
            }


        }
    }
</script>

<style scoped>
    .serve_select_width{
        width: 80px;
    }
    .server_cell{
        width: 100px;
        padding: 10px!important;
        margin: 5px 10px!important;
        position: relative;
        background: #f9f9f9!important;
        box-shadow: 0 1px 2px #999;
    }
    .server_img{
        width: 100px;
    }
    .server_font{
        margin-top: 5px;
        font-size: 14px;
        color: #666;
    }
    .active{
        box-shadow: 0 1px 2px #05111D;
    }
    .active .server_font{
        color: #fff;
    }
    .server_delete_btn{
        position: absolute;
        right: 3px;
        top: 3px;
        width: auto!important;
        background: #fff;
        display: block;
        padding: 5px;
        border-radius: 100%;
        color: #20a0ff;
    }
    .add_server_btn{
        margin: 5px 10px!important;
        background: #f9f9f9!important;
        box-shadow: 0 1px 2px #999;
    }
    .add_server_btn:hover{
        background: #20a0ff!important;
        color: #fff!important;
    }
    .add_server_btn i{
        opacity: 1!important;
        visibility:inherit!important;
        width: auto!important;
    }

</style>
